<template>
    <div class="edu-page-warp">
        <div v-if="!showDetails">
            <el-card shadow="never" body-style="padding: 24px;">
                <div class="collect-conditional-title">{{$t('faceIdentify.performsConditional')}}</div>
                <div class="collect-conditional-content">
                    <el-form
                        :rules="rules"
                        :model="queryForm"
                        ref="queryForm"
                        label-position="right"
                        label-width="90px"
                    >
                        <el-row :gutter="24" style="height: 50px;">
                            <!-- 学年学期 -->
                            <el-col :span="7">
                                <el-form-item
                                    label-width="90px"
                                    label-position="right"
                                    prop="calendarId"
                                    :label="$t('regist.calendarId')"
                                >
                                    <CalendarSelect
                                        v-model="queryForm.calendarId"
                                        :all="true"
                                    ></CalendarSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label-width="0">
                                    <el-button
                                        type="primary"
                                        @click="onSubmit('queryForm')"
                                    >{{$t("faceIdentify.performPhotoFetching")}}</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label-width="0">
                                    <el-button
                                        type="primary"
                                        @click="termSettings('queryForm')"
                                    >{{$t("faceIdentify.registrationTermSettings")}}</el-button>
                                    <span>{{ isCalendarName ? calendarName : '请设置注册学期' }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-card>
            <el-card shadow="never" body-style="padding: 24px;">
                <el-table stripe :data="tasks" size="mini">
                    <el-table-column
                        v-for="item in tasksColumn"
                        :key="item.id"
                        :prop="item.id"
                        :label="item.title"
                    ></el-table-column>
                    <el-table-column :label="$t('label.executionResult')">
                        <template slot-scope="props">
                            <span style="font-weight:bold;">{{props.row.progress ? props.row.progress  : '0'}}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('message.operating')">
                        <template slot-scope="props">
                            <div v-if="props.row.progress === 100">
                                <a @click="checkDetail(props.row)">{{$t('detail')}}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <div slot="empty">
                        <div class="empty_img_container">
                            <img src="/static/images/faceIdentify/u26.png" alt />
                        </div>
                    </div>
                </el-table>
                <el-row>
                    <el-col>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            @keyup.enter.native="handleKey"
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20,50,100,500,1000]"
                            :page-size="queryForm.pageSize_"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryForm.total_"
                            style="float:right;margin-top:10px"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </el-card>

            <el-dialog
                :title="$t('showCollectTip')"
                :visible.sync="showTipDialog"
                width="504px"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
            >
                <el-row :gutter="20">
                    <el-col>
                        <div style="font-size:14px">
                            <i class="el-icon-warning"></i>
                            {{$t('showCollectContent')}}
                        </div>
                    </el-col>
                </el-row>
                <div style="text-align:right;padding-top:30px;">
                    <el-button type="default" @click="closeTipDialog">{{$t('collectCancel')}}</el-button>
                    <el-button type="primary" @click="sendTask">{{$t('collectSubmit')}}</el-button>
                </div>
            </el-dialog>
            <el-dialog :before-close="cancel" title="注册学期设置" width="504px" :visible.sync="dialogFormVisible" :dataProp="dataProp">
                <el-form :model="form" ref="formName" :rules="rules">

                    <!-- 等第 -->
                    <el-row>
                        <el-col :span="24">
                            <el-form-item
                                label-width="90px"
                                label-position="right"
                                prop="calendarId"
                                :label="$t('regist.calendarId')"
                            >
                                <CalendarSelect
                                    v-model="form.calendarId"
                                    :all="true"
                                ></CalendarSelect>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">{{$t('annualTotalBudgetSetting.cancel')}}</el-button>
                    <el-button type="primary" @click="determine('formName')">{{$t('annualTotalBudgetSetting.determine')}}</el-button>
                </div>
            </el-dialog>
        </div>
        <div v-if="showDetails">
            <div class="detail_title">
                <a @click="checkDetail" class="detail_map_first">{{$t('photoCollect')}}</a>
                <span class="detail_map_second" style="display:inline-block;padding:0 10px;">/</span>
                <span class="detail_map_second">{{$t('detail')}}</span>
            </div>
            <div>
                <el-card shadow="never" body-style="padding: 24px;">
                    <div class="collect-conditional-title">{{$t('faceIdentify.filterCondition')}}</div>
                    <div class="collect-conditional-content">
                        <el-form :model="queryDetailForm" label-position="left" label-width="90px">
                            <el-row :gutter="24" style="height: 50px;">
                                <el-col :span="8">
                                    <el-form-item
                                        :label="$t('label.stuCode') + ' :'"
                                        prop="studentId"
                                    >
                                        <el-input
                                            type="text"
                                            :placeholder="$t('inputPlaceholder')"
                                            v-model="queryDetailForm.studentId"
                                            maxlength="32"
                                            show-word-limit
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        :label="$t('label.college') + ' :'"
                                        prop="professionCateGory"
                                    >
                                        <el-select
                                            v-model="queryDetailForm.faculty"
                                            style="width: 100%;"
                                            clearable
                                            filterable
                                        >
                                            <el-option
                                                v-for="item in detailOptions.faculty"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item :label="$t('label.major') + ' :'" prop="campus">
                                        <el-select
                                            v-model="queryDetailForm.major"
                                            clearable
                                            filterable
                                            style="width: 100%"
                                        >
                                            <el-option
                                                v-for="item in detailOptions.major"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item :label="$t('label.eCardHasPhoto') + ' :'" label-width="100">
                                        <el-select
                                            v-model="queryDetailForm.getPhotoStatus"
                                            filterable
                                            style="width: 74%"
                                            clearable
                                        >
                                            <el-option
                                                v-for="item in detailOptions.getPhotoStatus"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item :label="$t('label.concentricHasPhoto') + ' :'" label-width="100">
                                        <el-select
                                            v-model="queryDetailForm.getPhotoStatusTxy"
                                            filterable
                                            style="width: 74%"
                                            clearable
                                        >
                                            <el-option
                                                v-for="item in detailOptions.getPhotoStatus"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" class="float-right btn-position">
                                    <el-form-item class="float-right" label-width="0">
                                        <el-button size="mini" @click="reset">
                                            {{
                                            $t("common.btn.reset")
                                            }}
                                        </el-button>
                                        <el-button type="primary" size="mini" @click="filterSubmit">
                                            {{
                                            $t("common.btn.filter")
                                            }}
                                        </el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-card>

                <el-card shadow="never" body-style="padding: 24px;">
                <p class='collect-detail-title' v-if="$store.state.language == 'cn'">操作人 - {{showDetailItem.operator}} 在 {{showDetailItem.operatingTime}} 的抓取结果列表</p>
                <p class='collect-detail-title' v-if="$store.state.language == 'en'">Operator - {{showDetailItem.operator}} at {{showDetailItem.operatingTime}} grab result list</p>
                    <el-table stripe :data="detailList" size="mini">
                        <el-table-column
                            v-for="item in detailColumn"
                            :key="item.id"
                            :prop="item.id"
                            :label="item.title"
                        ></el-table-column>
                        <el-table-column :label="$t('label.eCardHasPhoto')">
                            <template slot-scope="props">
                                <span v-if="props.row.getPhotoStatus === '1'">{{$t('system.department.yes')}}</span>
                                <span v-if="props.row.getPhotoStatus === '0'">{{$t('system.department.no')}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="一卡通照片上传结果">
                            <template slot-scope="props">
                                <el-tag
                                    type="success"
                                    v-if="props.row.uploadPhotoStatus === '1'"
                                    size="mini"
                                >{{$t('uploadSuccess')}}</el-tag>
                                <el-tag
                                    type="danger"
                                    v-if="props.row.uploadPhotoStatus === '0'"
                                    size="mini"
                                >{{$t('uploadFail')}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('label.concentricHasPhoto')">
                            <template slot-scope="props">
                                <span v-if="props.row.getPhotoStatusTxy === '1'">{{$t('system.department.yes')}}</span>
                                <span v-if="props.row.getPhotoStatusTxy === '0'">{{$t('system.department.no')}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="同心云照片上传结果">
                            <template slot-scope="props">
                                <el-tag
                                    type="success"
                                    v-if="props.row.uploadPhotoStatusTxy === '1'"
                                    size="mini"
                                >{{$t('uploadSuccess')}}</el-tag>
                                <el-tag
                                    type="danger"
                                    v-if="props.row.uploadPhotoStatusTxy === '0'"
                                    size="mini"
                                >{{$t('uploadFail')}}</el-tag>
                            </template>
                        </el-table-column>
                        <div slot="empty">
                            <div class="empty_img_container">
                                <img src="/static/images/faceIdentify/u26.png" alt />
                            </div>
                        </div>
                    </el-table>
                    <el-row>
                        <el-col>
                            <el-pagination
                                @size-change="handleDetailSizeChange"
                                @current-change="handleDetailCurrentChange"
                                @keyup.enter.native="handleKey"
                                :current-page="queryDetailForm.pageNum_"
                                :page-sizes="[20,50,100,500,1000]"
                                :page-size="queryDetailForm.pageSize_"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="queryDetailForm.total_"
                                style="float:right;margin-top:10px"
                            ></el-pagination>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </div>
    </div>
</template>
<script>
import faceIdentifyApi from "common/src/api/faceIdentify";
import { queryDic, findTrainingLevelByProjId } from "common/src/api/dictionary";
export default {
    name: "collect",
    data() {
        return {
            showDetails: false,
            showDetailItem: '',
            showTipDialog: false,
            tasks: [],
            tasksColumn: [
                { id: "calendarCn", title: this.$t("label.grade") },
                // { id: "trainingLevelI18n", title: this.$t("label.trainingLevel") },
                { id: "operator", title: this.$t("label.operator") },
                { id: "operatingTime", title: this.$t("label.operateTime") }
            ],
            queryForm: {
                // grade: "", //年级
                // trainingLevel: "", //培养层次
                calendarId: 110,
                pageSize_: 20,
                pageNum_: 1,
                total_: 0
            },
            options: {
                grade: [], //年级
                trainingLevel: [] //培养层次
            },
            rules: {
                grade: [
                    {
                        required: true,
                        message: this.$t("gradeRequired"),
                        trigger: "change"
                    }
                ],
                trainingLevel: [
                    {
                        required: true,
                        message: this.$t("trainingLevelRequired"),
                        trigger: "change"
                    }
                ],
                calendarId: [
                    {
                        required: true,
                        message: this.$t('regist.choiceCalendarId'),
                        trigger: 'change',
                    },
                ]
            },
            queryDetailForm: {
                studentId: "", //学号
                // sex: "", //性别
                faculty: "", //,理院系
                major: "", //专业
                getPhotoStatus: "", //一卡通是否有照片
                getPhotoStatusTxy: "", //同心云是否有照片
                pageSize_: 20,
                pageNum_: 1,
                total_: 0
            },
            detailOptions: {
                sex: [],
                faculty: [],
                major: [],
                getPhotoStatus: []
            },
            loadConfig: {
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, .48)"
            },
            detailList: [],
            detailColumn: [
                { id: "studentId", title: this.$t("label.stuCode") },
                { id: "name", title: this.$t("label.name") },
                { id: "grade", title: this.$t("label.grade") },
                { id: "faculty", title: this.$t("label.college") },
                { id: "major", title: this.$t("label.major") }
            ],
            isGraduate: false, // 判断是 true研究生还是 false本科生
            dialogFormVisible: false, // 注册学期设置
            form: {
                calendarId: ''
            },
            calendarName: '', //注册学期
            isCalendarName: false // 查询注册学期设置 false data为null 反之为true
        };
    },
    mounted() {
        let user = this.$store.state.session.user || JSON.parse(localStorage.getItem("user"))
        if (user && user.currentManageDptId) {
            this.isGraduate = user.currentManageDptId != "1"
        }
        this.init();
        this.initOptions();
        this.getTaskList();
        this.getActiveCalendarSet();
    },
    methods: {
        // 取消
        cancel() {
            // for (let key in this.form) {
            //     this.form[key] = ''
            // }
            // this.$refs['formName'].resetFields()
            this.dialogFormVisible = false
            this.dialogType = ''
        },
        termSettings() {
            this.dialogFormVisible = true
        },
        // 确定
        determine(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    faceIdentifyApi.setActiveCalendar({
                        "calendar": this.form.calendarId,
                        "calendarName": '',
                        "setType": this.isGraduate ? "2" : "1",
                    }).then(
                        response => {
                            if (response.code === 200) {
                                //展示列表信息
                                this.dialogFormVisible = false
                                this.getActiveCalendarSet();
                                this.$message({
                                    type: "success",
                                    message: response.msg
                                });
                            }
                        },
                        error => {
                            // 数据保存为上一次请求的数据。
                        }
                    )
                    .catch(error => {
                        // 数据保存为上一次请求的数据。
                    });
                }
            })
        },
        // 查询注册学期设置
        getActiveCalendarSet() {
            faceIdentifyApi.getActiveCalendarSet({
                "setType": this.isGraduate ? "2" : "1",
            }).then(
                response => {
                    if (response.code === 200) {
                        //展示列表信息
                        this.isCalendarName = response.data ? true : false
                        this.calendarName = response.data.calendarName
                        this.form.calendarId = response.data.calendar
                    }
                },
                error => {
                    // 数据保存为上一次请求的数据。
                }
            )
            .catch(error => {
                // 数据保存为上一次请求的数据。
            });
        },
        init() {
            //绑定年级
            // let now = new Date();
            // let currentYear = now.getFullYear(),
            //     minYear = currentYear - 10;
            // for (let grade = currentYear; grade > minYear; grade--) {
            //     let obj = { label: grade, value: grade };
            //     this.options.grade.push(obj);
            // }
            // this.queryForm.grade = this.options.grade[0].value;
            // this.changeTrainingLevelOptions();
        },
        initOptions() {
            this.queryForm["x-token"] =
                this.$store.state.session.sessionid ||
                localStorage.getItem("sessionid") ||
                "";
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: [
                    "X_YX",
                    "X_PYCC",
                    "X_PYLB",
                    "X_XWLX",
                    "X_XQ",
                    "G_XBIE",
                    "X_XXXS",
                    "isAborad",
                    "gat",
                    "X_RXJJ",
                    "K_SF",
                    "X_LXZT",
                    "G_ZY"
                ]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    this.fillSelect(res.data);
                }
            });
        },
        fillSelect(data) {
            this._fill("faculty", data.X_YX);
            this._fill("major", data.G_ZY);
            this._fill("sex", data.G_XBIE);
            this._fill("getPhotoStatus", data.K_SF);
        },
        _fill(type, data) {
            for (const key in data) {
                this.detailOptions[type].push({
                    value: key,
                    label: data[key]
                });
            }
        },
        changeTrainingLevelOptions() {
            let currentUser =
                (this.$store.state.session && this.$store.state.session.user) ||
                JSON.parse(localStorage.getItem("user"));
            this.queryForm.projId = currentUser.currentManageDptId;
            findTrainingLevelByProjId(this.queryForm.projId).then(res => {
                if (res.code === 200 && !this.options.trainingLevel.length) {
                    this.loadTrainingLevelOptions("trainingLevel", res.data);
                }
            });
        },
        loadTrainingLevelOptions(optionKey, dataObj) {
            this.queryForm.trainingLevel = "";
            this.options[optionKey] = [];
            _.each(dataObj, level => {
                this.options[optionKey].push({
                    label:
                        "en" === this.$store.getters.language
                            ? level.nameEN
                            : level.nameCN,
                    value: level.code
                });
            });
            if (this.options.trainingLevel.length) {
                this.queryForm.trainingLevel = this.options.trainingLevel[0].value;
            }
        },
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.showTipDialog = true;
                } else {
                    return false;
                }
            });
        },
        sendTask() {
            this.closeTipDialog();
            faceIdentifyApi.regStuPhotosCollect({
                "calendar": this.queryForm.calendarId,
                "type": this.isGraduate ? "2" : "1",
            }).then(
                response => {
                    if (response.code === 200) {
                        //获取抓取列表
                        this.$message({
                            type: "success",
                            message: response.msg
                        });
                        this.getTaskList();
                    } else {
                        this.$message({
                            type: "error",
                            message: response.msg
                        });
                    }
                },
                error => {
                    // 数据保存为上一次请求的数据。
                }
            )
            .catch(error => {
                // 数据保存为上一次请求的数据。
            });
        },
        getTaskList() {
            faceIdentifyApi.getActiveStudentPhotoProgress({
                "pageNum_": this.queryForm.pageNum_,
                "pageSize_": this.queryForm.pageSize_,
                "type": this.isGraduate ? "2" : "1",
            }).then(
                response => {
                    if (response.code === 200) {
                        //展示列表信息
                        this.tasks = response.data.list;
                        this.queryForm.total_ = response.data.total_;
                    }
                },
                error => {
                    // 数据保存为上一次请求的数据。
                }
            )
            .catch(error => {
                // 数据保存为上一次请求的数据。
            });
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.getTaskList();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.getTaskList(false);
        },
        handleKey(e){
            e.target.blur();
        },
        closeTipDialog() {
            this.showTipDialog = false;
        },
        checkDetail(params) {
            this.showDetailItem = params || '';
            this.showDetails = !this.showDetails;
            if(this.showDetails && this.showDetailItem.id){
                // this.queryDetailForm = {
                //     stuCode: "", //学号
                //     sex: "", //性别
                //     department: "", //,理院系
                //     major: "", //专业
                //     hasPhoto: "", //是否有照片
                //     pageSize_: 20,
                //     pageNum_: 1,
                //     total_: 0
                // };
                this.queryDetailForm = {
                    progressId: "", //进度id
                    studentId: "", //学号
                    faculty: "", //学院
                    major: "", //专业
                    getPhotoStatus: "", //是否有照片
                    pageSize_: 20,
                    pageNum_: 1,
                    total_: 0
                };
                this.getDetailList()
            }else if(!this.showDetails){
                this.getTaskList();
            }
        },
        reset() {
            this.queryDetailForm.studentId = null;
            this.queryDetailForm.faculty = null;
            this.queryDetailForm.major = null;
            this.queryDetailForm.getPhotoStatus = null;
            this.queryDetailForm.getPhotoStatusTxy = null;
        },
        filterSubmit() {
            this.getDetailList(true);
        },
        getDetailList(isFirstPage) {
            this.queryDetailForm.pageNum_ = isFirstPage ? 1 : this.queryDetailForm.pageNum_;
            faceIdentifyApi.getActiveStudentPhotos({
                "pageNum_": this.queryDetailForm.pageNum_,
                "pageSize_": this.queryDetailForm.pageSize_,
                "progressId": this.showDetailItem.id,
                "studentId": this.queryDetailForm.studentId,
                "faculty": this.queryDetailForm.faculty,
                "major": this.queryDetailForm.major,
                "getPhotoStatus": this.queryDetailForm.getPhotoStatus,
                "getPhotoStatusTxy": this.queryDetailForm.getPhotoStatusTxy
                
            }).then(
                response => {
                    if (response.code === 200) {
                        //展示列表信息
                        this.detailList = response.data.list;
                        this.queryDetailForm.total_ = response.data.total_;
                    }
                },
                error => {
                    // 数据保存为上一次请求的数据。
                }
            )
            .catch(error => {
                // 数据保存为上一次请求的数据。
            });
        },
        handleDetailSizeChange(val) {
            this.queryDetailForm.pageSize_ = val;
            this.getDetailList();
        },
        handleDetailCurrentChange(val) {
            this.queryDetailForm.pageNum_ = val;
            this.getDetailList();
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.collect-conditional {
    &-title {
        display: inline-block;
        margin-bottom: 26px;
        font-weight: 400;
        font-style: normal;
        color: #2b3b4e;
        font-size: 18px;
    }
    &-content {
        padding-left: 85px;
    }
}
.empty_img_container {
    width: 200% !important;
    margin-left: -50%;
    padding: 150px 0;
    background-color: rgba(246, 248, 250, 1);
}
.detail_map {
    &_first {
        color: rgba(43, 59, 78, 0.329411764705882);
    }
    &_second {
        color: rgba(0, 0, 0, 0.447058823529412);
    }
}
.detail_title {
    padding-top: 5px;
    padding-bottom: 10px;
}
.btn-position {
    margin-top: -100px;
}
.collect-detail-title{
    font-size: 18px;
}
</style>
